<template>
	<view :class="boder?'my-list':'my-list-noboder'" @click="handleClick()">
		<view class="list-title" :style="[{'color':titleColor},{'fontWeight':bold||boldTitle?'600':'400'}]">
			<view  class="must-icon" >
				<span v-if="mustIcon" class="must-icon iconfont icon-must-fill2"></span>
			</view>
			<view>{{propTitle}}</view>
		</view>
		<view class="value-wrap">
			<slot></slot>
			<view class="list-content" :style="[{'color':valueColor},{'fontWeight':bold||boldValue?'600':'400'}]">{{subData}}</view>
			<span class="iconfont icon-jiantou" :class="isIcon?'list-icon':'list-icon-hide'" :style="[{color:iconColor}]"></span >
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-list",
		data() {
			return {
				subData:this.propValue
			}
		},
		props:{
			boldValue:{
				type:Boolean,
				default:false
			},
			mustIcon:{
				type:Boolean,
				default:false
			},
			boldTitle:{
				type:Boolean,
				default:false
			},
			boder:{
				type:Boolean,
				default:true
			},
			propTitle:{
				type:String,
				default:'重点科学人员岗位浮动绩效'
			},
			propValue:{
				default:''
			},
			valueColor:{
				default:'#454A5E'
			},
			titleColor:{
				default:'#454A5E'
			},
			iconColor:{
				default:'#A7A3A3'
			},
			bold:{
				type:Boolean,
				default:false
			},
			isIcon:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			handleClick(){
				this.$emit('click',this.listData)
			}
		},
		watch:{
			 propValue () {
			    this.subData = this.propValue
				console.log('11更新')
			  }
		}
	}
</script>

<style scoped lang="scss">
	.must-icon{
		width: 30rpx;
		font-size: 30rpx;
		color: #ff0000;
		&-hide{
			opacity: 0;
		}
	}
	.my-list{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #E5E5E5;
		font-size: 32rpx;
	}
	.my-list-noboder{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		font-size: 32rpx;
	}
	.list-title{
		display: flex;
		align-items: center;
		color: #454A5E;
	}
	.value-wrap{
		display: flex;
		justify-content: space-between;
		color: #454A5E;
		padding-right: 30rpx;
	}
	.list-icon{
		margin: auto 0;
		font-size:24rpx;
		margin-left: 20rpx;
		&-hide{
			opacity: 0;
		}
	}
</style>
